import React,{ Fragment } from 'react'
import { Avatar,Divider,Icon } from 'antd'
import "../public/style/components/header.less"
import "../public/style/components/author.less"

const Header = ()=>{
    return (
        <div className="author-div comm-box">
            <div> <Avatar size={100} src="http://blogimages.jspang.com/blogtouxiang1.jpg"/> </div>
            <div className="author-introduction">
                光头程序员，专注于WEB和移动前端开发。要录1000集免费前端视频的傻X。此地维权无门，此时无能为力，此心随波逐流。
                <Divider>社交帐号</Divider>
                <div className="account-box">
                    <Avatar size={35} icon="github" className="account"  />
                    <Avatar size={35} icon="qq"  className="account" />
                    <Avatar size={35} icon="wechat"  className="account"  />
                    <Avatar size={35} icon={<Icon type="dingding" style={{fontSize:"1rem",color:"white"}} />}  className="account"  />
                    <Avatar size={35} icon={<Icon type="alipay-circle" style={{fontSize:"1rem",color:"white"}}/>}  className="account"  />
                    <Avatar size={35} icon={<Icon type="taobao" style={{fontSize:"1rem",color:"white"}}/>}  className="account"  />
                    <Avatar size={35} icon={<Icon type="gitlab" style={{fontSize:"1rem",color:"white"}} />}  className="account"  />
                    <Avatar size={35} icon={<Icon type="google-plus" style={{fontSize:"1rem",color:"white"}} />}  className="account"  />
                </div>
            </div>
        </div>
    )
}

export default Header
